<template>
  <div class="msg-userinfo">
    <div class="uinfo-tit">
      <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
      <van-button @click="userupdate" type="primary" color="pink" size="mini">保存</van-button>
    </div>
    <div class="uinfo-cont">
      <div class="content-text">
        <div class="text-le">
          <span>编辑资料</span>
        </div>
        <div class="text-rg">
          <div class="cover" v-show="covers">
            <van-loading color="pink" size="20px">加载中</van-loading>
          </div>
          <van-uploader :after-read="afterRead" >
            <img :src="uinfo.uportrait" alt="">
            <i class="iconfont icon-xiangji2"></i>
          </van-uploader>
        </div>
      </div>
      <van-cell-group>
        <van-field v-model="uinfo.username" label="昵称" input-align="right" placeholder="请输入你的昵称" />
        <van-field
          readonly
          clickable
          name="picker"
          :value="uinfo.sex"
          label="性别"
          placeholder="请选择您的性别"
          @click="showPicker = true"
          input-align="right"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="sexcheck"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="role"
          :value="uinfo.role"
          label="角色"
          placeholder="请选择你的角色"
          @click="showRole = true"
          input-align="right"
        />
        <van-popup v-model="showRole" position="bottom">
          <van-picker
            show-toolbar
            :columns="rolelist"
            @confirm="rolecheck"
            @cancel="showRole = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="area"
          :value="uinfo.area"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
          input-align="right"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          name="picker"
          :value="uinfo.birthday"
          label="生日"
          placeholder="请选择您的生日"
          @click="showBR = true"
          input-align="right"
        />
        <van-popup v-model="showBR" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onbirthday"
            @cancel="showBR = false"
          />
        </van-popup>

        <van-field v-model="uinfo.signature" label="个性签名" maxlength="15" input-align="right" placeholder="请填写签名,15字"  />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import areaList from '@/Photography/assets/js/area';
import { Toast } from 'vant';

export default {
  name: "userinfochf",
  data() {
    return {
      covers: false,
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      showPicker:false,
      columns:["男","女"],
      showRole: false,
      rolelist:["普通用户","摄影师","模特"],
      showBR: false,
      currentDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      file: 'https://icweiliimg6.pstatp.com/weili/sm/254329013950218271.jpg',
      uinfo: {},
    }
  },
  created() {
    const { release } = this.$route.params;
    this.uinfo = release;
    const year = new Date(this.uinfo.birthday).getFullYear();
    const mouth = `${new Date(this.uinfo.birthday).getMonth()+1}`.padStart(2, 0);
    const day = `${new Date(this.uinfo.birthday).getDate()}`.padStart(2, 0);
    this.uinfo.birthday = `${year}-${mouth}-${day}`
  },
  methods: {
    async afterRead(file) {
      this.covers = true
      let params = new FormData()
      params.append('file', file.file)
      console.info(params)
      try {
        const res = await this.$axios.post('/blog/picupload',params,{
          'Content-Type':'multipart/form-data'
        })
        const {success, data} = res.data
        if (success){
          this.uinfo.uportrait = data[0] + '?x-oss-process=style/toux'
          this.covers = false
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    onConfirm(values) {
      if (values[2]){
        this.uinfo.area = values[1].name + " " + values[2].name;
      }else {
        this.uinfo.area =values[1].name;
      }
      this.showArea = false;
    },
    sexcheck(value) {
      this.uinfo.sex = value;
      this.showPicker = false;
    },
    rolecheck(value) {
      this.uinfo.role = value;
      this.showRole = false;
    },
    onbirthday(value) {
      const year = new Date(value).getFullYear();
      const mouth = `${new Date(value).getMonth()+1}`.padStart(2, 0);
      const day = `${new Date(value).getDate()}`.padStart(2, 0)
      this.uinfo.birthday = `${year}-${mouth}-${day}`
      this.showBR = false;
    },
    async userupdate(){
      try {
        const res = await this.$axios({
          url:'/blog/userupdate',
          method:"post",
          data:{
            uid: this.uinfo.uid,
            username: this.uinfo.username,
            sex: this.uinfo.sex,
            role: this.uinfo.role,
            area: this.uinfo.area,
            birthday: new Date(this.uinfo.birthday).getTime(),
            signature: this.uinfo.signature,
            uportrait: this.uinfo.uportrait,
          }
        })
        const {success, msg} = res.data
        if (success){
          Toast.success("保存成功")
          this.$router.go(-1)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.msg-userinfo{
  height: 100%;
  background-color: #ffffff;
  overflow: hidden;
  .uinfo-tit{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    display: flex;
    justify-content: space-between;
    padding: 0 vw(30);
    padding-top: vw(20);
    box-sizing: border-box;
    align-items: center;
    background-color: #ffffff;
    i{
      font-size: vw(50);
    }
  }
  .uinfo-cont{
    padding: 0 vw(30);
    box-sizing: border-box;
    background-color: #ffffff;
    .content-text{
      height: vw(200);
      display: flex;
      .text-le{
        width: vw(450);
        line-height: vw(200);
        span{
          font-size: vw(50);
          padding-left: vw(30);
        }
      }
      .text-rg{
        flex: 1;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        .cover{
          position: absolute;
          width: vw(140);
          height: vw(140);
          border-radius: 50%;
          background-color: #33333380;
          z-index: 999;
          display: flex;
          align-items: center;
          ::v-deep .van-loading__text{
            color: #ffffff;
          }
        }
        img{
          width: vw(130);
          height: vw(130);
          border-radius: 50%;
          object-fit: cover;
        }
        i{
          position: absolute;
          bottom: 0;
          right: vw(10);
          font-size: vw(50);
          border-radius: 50%;
          background-color: #ffffff;
          border: 2px solid #ffffff;
          color: #42b983;
        }
      }
    }
  }
}
</style>
